<!-- 进度条代码 -->
<template>
  <div v-if="isUploading" class="progress-modal">
    <div class="modal-content">
      <h3>文件上传进度</h3>
      <p>文件名: {{ currentFileName }}</p>
      <progress max="100" :value="uploadProgress">
        {{ uploadProgress }}%
      </progress>
    </div>
    <!-- 待上传文件名称 -->
    <!-- 文件列表 -->
    <ul class="list-group">
      <li
        v-for="(file, index) in selectedFiles"
        :key="index"
        class="list-group-item"
      >
        {{ file.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "UploadProgressModal",
  props: {
    isUploading: Boolean,
    currentFileName: String,
    uploadProgress: Number,
    selectedFiles: {
      type: Array,
      default: () => [], // 提供一个空数组作为默认值
    },
  },
  // eslint-disable-next-line no-unused-vars
  setup(props) {
    // 在这个简单的组件中，我们直接使用props，不需要额外的响应式数据
    return {};
  },
};
</script>

<style scoped>
.progress-modal {
  /* 减小高度和宽度 */
  width: 400px; /* 例如，设置为你想要的宽度 */
  height: 200px; /* 例如，设置为你想要的高度 */
  display: flex;
  flex-direction: column; /* 垂直布局 */
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 50%; /* 居中显示 */
  left: 50%; /* 居中显示 */
  transform: translate(-50%, -50%); /* 相对于自身宽高进行位移 */
  border-radius: 10px; /* 添加圆角 */
  overflow: hidden; /* 确保内容不超出模态框 */
}

.modal-content {
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
}

progress {
  width: 100%;
  margin: 10px 0;
}
</style>
